<template>
  <div class="map-wraper">
      <div class="map-wraper" id="mapId" v-if="show"></div>
      <div ref="customInfoWindow" class="customInfoWindow" v-if="show">
        <p>{{currentInfo.title || '标题'}}</p>
        <img @click="onCloseInfoWindow" src="@/components/whMap/assets/close.png" alt="">
      </div>
  </div>
</template>

<script>
// import WHMap from 'wh-map'
import WHMap from '@/components/whMap/index.js'
export default {
  data() {
    return {
      mapOptions: null,
      map: null,
      whMap: null,
      currentInfo: {},
      infoWindow: null,
      show: false
    }
  },
  watch:{
     '$route'(val, from) {//监听到路由（参数）改变
         // 拿到目标参数 val.query.typeCode 去再次请求数据接口
         this.show = false
         setTimeout(() => {
           this.loadMap()
         }, 500)
     }
  },
  created() {
  },
  mounted() {
    this.loadMap()
  },
  methods: {
    loadMap () {
      this.show = true
      this.$nextTick(() => {
        const type = Number(this.$route.query.type) || 1
        if (type === 1) {
          // 高德
          this.mapOptions = {
            container: 'mapId',
            type: 1,
            coordinateFrom: 'BD09',
            loadConfig: {
              securityJsCode: 'bb3b3bac21f6ec74ae054810f69f091f',
              key: '835b9df8447d78cbfaf588cfbdbe58e4',
              // version: '1.4.5',
              customUrl: '', // api 接口地址
              // tileUrl: 'https://webst01.is.autonavi.com/appmaptile?style=6&x=[x]&y=[y]&z=[z]'
            },
            mapConfig: {
              center: [110.68554,35.28374],
              zoom: 13,
              minZoom: 4,
              maxZoom: 20,
              // bounds: [[110.5928039844627, 35.23751088933946], [110.78367593922282, 35.35488007592691]] // sw表示矩形区域的西南角，参数ne表示矩形区域的东北角（左下 ->  右上）
            }
          }
        } else if (type === 2) {
          // 天地图
          this.mapOptions = {
            container: 'mapId',
            type: 2,
            coordinateFrom: 'BD09',
            loadConfig: {
              key: '0eea655f2149a566b13ccdf2f92b09a1',
              version: '4.0',
              customUrl: null,
              tileUrl: ''
            },
            mapConfig: {
              center: [110.68554,35.28374],
              zoom: 13,
              minZoom: 4,
              maxZoom: 20,
              bounds: [[110.5928039844627, 35.23751088933946], [110.78367593922282, 35.35488007592691]] // sw表示矩形区域的西南角，参数ne表示矩形区域的东北角（左下 ->  右上）
            }
          }
        } else if (type === 3) {
          // maptalks
          this.mapOptions = {
            container: 'mapId',
            type: 3,
            loadConfig: {
              customUrl: null,
              tileUrl: ''
            },
            coordinateFrom: 'BD09',
            mapConfig: {
              center: [110.68554,35.28374],
              zoom: 13,
              minZoom: 4,
              maxZoom: 20,
              bounds: [[110.5928039844627, 35.23751088933946], [110.78367593922282, 35.35488007592691]] // sw表示矩形区域的西南角，参数ne表示矩形区域的东北角（左下 ->  右上）
            }
          }
        } else if (type === 4) {
          // 百度
          this.mapOptions = {
            container: 'mapId',
            type: 4,
            coordinateFrom: 'BD09',
            loadConfig: {
              key: 'S8UX1W99g3MCkUEMzjpp7hhcxteeCE23', // key
              version: '3.0', // 版本
              tileUrl: null, // 瓦片地址
              customUrl: null // api 接口地址
            },
            mapConfig: {
              // center: [113.55523534148266, 35.723403664216804],
              center: [110.68554,35.28374],
              zoom: 13,
              minZoom: 4,
              maxZoom: 20,
              // bounds: [[110.5928039844627, 35.23751088933946], [110.78367593922282, 35.35488007592691]] // sw表示矩形区域的西南角，参数ne表示矩形区域的东北角（左下 ->  右上）
            }
          }
        }
        this.whMap = new WHMap(this.mapOptions)
        this.whMap.loadedMap = this.loadedMap
        this.whMap.onClickMarker = this.onClickMarker
        this.whMap.onClickPolygon = this.onClickPolygon
        this.whMap.onClickMap = this.onClickMap
      })
    },
    loadedMap (map) {
      console.log('地图加载完成');
      this.map = map
      this.initMarker()
      this.initPolygon()
      this.initPath()
      // this.initSpecialPath()
    },
    initMarker () {
      setTimeout(() => {
        this.markerList = [
          {
            list: [
              {
                position: [110.673929,35.271195],
                properties: {
                  id: 1,
                  label: '类型1-1',
                  title: '设备1',
                  content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
                }
              },
              {
                position: [110.709806,35.269233],
                properties: {
                  id: 2,
                  label: '类型1-2',
                  title: '设备2',
                  content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
                }
              },
              {
                position: [110.714098,35.249889],
                properties: {
                  id: 3,
                  label: '类型1-3',
                  title: '设备3',
                  content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
                }
              }
            ],
            options: {}
          },
          {
            list: [
              {
                position: [110.615416,35.304756],
                properties: {
                  id: 1,
                  label: '类型7-1',
                  title: '设备7',
                  content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
                }
              },
              {
                position: [110.648719,35.304056],
                properties: {
                  id: 2,
                  label: '类型8-2',
                  title: '设备8',
                  content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
                }
              },
              {
                position: [110.648719,35.271828],
                properties: {
                  id: 2,
                  label: '类型9-3',
                  title: '设备9',
                  content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
                }
              }
            ],
            options: {
              coordinateFrom: 'GCJ02',
              icon: require('@/components/whMap/assets/marker/marker-1.png'), // marker icon
              width: 28, // marker 宽
              height: 28, // marker 高
              opacity: 1, // marker 透明度
              zIndex: 20, // marker 层级
              showInfoWindow: true
            }
          },
          {
            list: [
              {
                position: [110.670922,35.2965296],
                properties: {
                  id: 1,
                  label: '类型2-1',
                  title: '设备4',
                  content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
                }
              },
              {
                position: [110.7124448,35.294674],
                properties: {
                  id: 2,
                  label: '类型2-2',
                  title: '设备5',
                  content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
                }
              },
              {
                position: [110.7236001,35.317771],
                properties: {
                  id: 3,
                  label: '类型2-3',
                  title: '设备6',
                  content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
                }
              }
            ],
            options: { // marker 配置
              coordinateFrom: 'GCJ02',
              icon: require('@/components/whMap/assets/marker/marker-2.png'), // marker icon
              width: 28, // marker 宽
              height: 28, // marker 高
              opacity: 1, // marker 透明度
              zIndex: 20, // marker 层级
              showInfoWindow: true,
              customInfoWindow: this.$refs.customInfoWindow
            }
          }
        ]
        this.whMap.loadMarker(this.markerList)
      }, 2000)
    },
    initPolygon () {
      setTimeout(() => {
        this.polygonList = [
          {
            path: [
              [110.673929,35.271195],
              [110.709806,35.269233],
              [110.714098,35.249889],
              [110.64921,35.240076]
            ],
            properties: {
              id: 1,
              title: '区域1',
              content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
            }
          },
          {
            path: [
              [110.615416,35.304756],
              [110.648719,35.304056],
              [110.648719,35.271828],
              [110.625544,35.275192]
            ],
            properties: {
              id: 1,
              title: '区域2',
              content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
            },
            options: {
              lineColor: 'yellow',
              lineWidth: 5,
              lineOpacity: 0.1,
              lineStyle: 'solid' ,//
              color: 'yellow',
              opacity: 1,
              zIndex: 10, // 天地图无效
              showInfoWindow: true,
              customInfoWindow: this.$refs.customInfoWindow
            },
          },
          {
            path: [
              [110.670922,35.2965296],
              [110.7124448,35.294674],
              [110.7236001,35.317771],
              [110.6657578,35.315242]
            ],
            options: {
              lineColor: 'red',
              lineWidth: 5,
              lineOpacity: 0.1,
              lineStyle: 'solid' ,//
              color: 'red',
              opacity: 1,
              zIndex: 10, // 天地图无效
            },
            properties: {
              id: 1,
              title: '区域3',
              content: '北京市朝阳区阜通东大街6号院3号楼东北8.3公里',
              showInfoWindow: true,
            }
          }
        ]
        this.whMap.loadPolygon(this.polygonList)
      }, 2000)
    },
    initSpecialPath () {
      setTimeout(() => {
        this.whMap.loadSpecialPath({
          options: {
              coordinateFrom: 'BD09',
              start: {},
              end: {},
              point: {},
              line: {},
              speed: 1000
          },
          list: [
            {
              path: this.getPath([{
                      "BD09_X": "113.5546464829",
                      "BD09_Y": "35.7234255451"
                    },
                    {
                      "BD09_X": "113.5561145709",
                      "BD09_Y": "35.7234713279"
                    },
                    {
                      "BD09_X": "113.5558462125",
                      "BD09_Y": "35.7233621673"
                    },
                    {
                      "BD09_X": "113.5555938963",
                      "BD09_Y": "35.7233247021"
                    },
                    {
                      "BD09_X": "113.5553325208",
                      "BD09_Y": "35.7233063924"
                    },
                    {
                      "BD09_X": "113.5551254514",
                      "BD09_Y": "35.7232601119"
                    },
                    {
                      "BD09_X": "113.5548500269",
                      "BD09_Y": "35.7232040535"
                    },
                    {
                      "BD09_X": "113.5545886829",
                      "BD09_Y": "35.7231407389"
                    }]),
              properties: {
                name: '线路',
                pointCount: 4
              }
            }
          ]
        })
      }, 2000)
    },
    initPath () {
      setTimeout(() => {
        this.whMap.loadPath({
          options: {
            coordinateFrom: 'BD09',
            start: {
              offset: [0, -14]
            },
            end: {},
            // point: {
            //   icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
            //   // icon: "https://lbsyun.baidu.com/jsdemo/img/car.png",
            //   width: 26,
            //   height: 52
            // },
            line: {},
            speed: 1000,
            autoMove: true,
            loop: false
          },
          list: [
            {
              path: [
                [110.60340003112788,35.3272378804613],
                // [110.61507300476069,35.32737793246983],
                // [110.6264026556396,35.32681772297977],
                // [110.63790396789545,35.32569729235317],
                // [110.65318183044428,35.32485695919283],
                // [110.66451148132319,35.32569729235317],
                // [110.67755774597163,35.325417182270286],
                // [110.69506720642084,35.32485695919283],
                // [110.7120616827392,35.32443678933723],
                // [110.72459296325678,35.32485695919283],
                // [110.73575095275874,35.3247169028169],
                // [110.74690894226069,35.32443678933723],
                // [110.7464797888183, 35.31239099165688],
                [110.74630812744135, 35.29964290320916]
              ],
              properties: {
                name: '路径1'
              }
            },
            {
              path: [
                [110.60168341735834,35.28479094903727],
                [110.60889319519038,35.284510697294394],
                [110.621252814331,35.28549157415037],
                [110.63859061340327,35.28465082328708],
                [110.65335349182124,35.283810063693494],
                [110.66657141784663,35.28395019089871],
                [110.6791026983642,35.283389680622946],
                [110.69094733337397,35.28366993624584],
                [110.70227698425288,35.28366993624584],
                [110.71412161926264,35.28352980855564],
                [110.72167471984858,35.28366993624584],
                [110.73042945007319,35.28366993624584],
                [110.74296073059077,35.283389680622946],
                [110.75257376770014,35.283109424030016],
                [110.75978354553217,35.283109424030016],
              ],
              properties: {
                name: '路径2'
              }
            }
          ]
        })
      }, 2000)
    },
    getPath (arr) {
      var newArr = []
      arr.forEach(ele => {
        newArr.push([Number(ele.BD09_X), Number(ele.BD09_Y)])
      })
      return newArr
    },
    onClickMarker (e, data, infoWindow) {
      console.log('点击了标记', e);
      console.log(data);
      console.log(infoWindow);
      this.currentInfo = data
      // this.infoWindow = infoWindow
    },
    onCloseInfoWindow () {
      this.whMap.closeInfoWindow()
    },
    onClickPolygon (e, data, infoWindow) {
      console.log('点击了多边形', e);
      console.log(data);
      this.currentInfo = data
      this.infoWindow = infoWindow
    },
    onClickMap (e) {
      console.log(e);
    }
  },
}
</script>

<style scoped>
  .map-wraper {
    width: 100%;
    height: 100%;
  }
  .customInfoWindow {
    width: 200px;
    position: relative;
    background: cyan;
  }
  .customInfoWindow>p {
    width: 100%;
    text-align: center;
    padding: 16px;
    box-sizing: border-box;
  }
  .customInfoWindow>img {
    width: 28px;
    height: 28px;
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
  }
</style>
